<template>
	<div :class="['vertical-layout h-full', isCollapseClass]">
		<el-container class="vertical-layout-container h-full">
			<el-scrollbar class="vertical-layout-menu-container" :native="false">
				<layout-vertical-menu :items="navMenuItems"></layout-vertical-menu>
			</el-scrollbar>

			<el-main class="vertical-layout-content-container">
				<LayoutVerticalHeader class="vertical-layout-header" :collapse="isCollapse" />
				<section class="content">
					<component :is="layoutContentRenderer">
						<template v-for="(index, name) in $slots" v-slot:[name]="data">
							<slot :name="name" v-bind="data" />
						</template>
					</component>
				</section>
			</el-main>
			<AppCustomizer />
		</el-container>
	</div>
</template>

<script setup name="layout-vertical">
import LayoutVerticalMenu from "./components/layout-vertical-menu/index.vue";
import LayoutVerticalHeader from "./components/layout-vertical-header/index.vue";

import LayoutContentRendererDefault from "@CORE/layouts/components/layout-content-renderer/LayoutContentRendererDefault.vue";
import LayoutContentRendererLeft from "@CORE/layouts/components/layout-content-renderer/LayoutContentRendererLeft.vue";
import LayoutContentRendererLeftDetached from "@CORE/layouts/components/layout-content-renderer/LayoutContentRendererLeftDetached.vue";
import AppCustomizer from "@CORE/layouts/components/app-customizer/AppCustomizer.vue";
import staticNavMenuItems from "@/navigation/vertical/index";
import { appStore as useStore } from "@/stores/modules/app";
import { AuthStore } from "@/stores/modules/auth";
const auth = AuthStore();
const navMenuItems = computed(() => [...staticNavMenuItems, ...auth.authSidebarList]);

defineComponent({
	components: {
		LayoutContentRendererDefault,
		LayoutContentRendererLeft,
		LayoutContentRendererLeftDetached,
		AppCustomizer
	}
});
const store = useStore();
const route = useRoute();

const isCollapseClass = computed(() => {
	return store.layout.isCollapse ? "isCollapsed" : "isExpand";
});
const isCollapse = computed(() => store.layout.isCollapse);
const layoutContentRenderer = computed(() => {
	const rendererType = route.meta.contentRenderer;
	if (rendererType === "sidebar-left") return "layout-content-renderer-left";
	if (rendererType === "sidebar-left-detached") return "layout-content-renderer-left-detached";
	return LayoutContentRendererDefault;
});
</script>

<style lang="scss" scoped>
@import "layout-vertical.scss";
</style>
